<template class="interface-detail">
  <div>
    <el-form :model="int" ref="createRef" label-width="80px" :disabled="true">
      <el-form-item prop="module" label="所属模块">
        <el-select
          v-model="int.moduleId"
          placeholder="请选择所属模块"
          style="width: 100%"
        >
          <el-option
            v-for="item in modules"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="name" label="接口名称">
        <el-input
          v-model.trim="int.name"
          placeholder="请输入接口名称"
        ></el-input>
      </el-form-item>
      <el-form-item prop="path" label="接口地址">
        <el-input
          v-model.trim="int.path"
          autocomplete="off"
          placeholder="请输入接口地址，输入不包含域名的相对路径，如/account/login"
        ></el-input>
      </el-form-item>
      <el-form-item prop="requestPort" label="端口">
        <el-input
          v-model.trim="int.requestPort"
          autocomplete="off"
          placeholder="请输入端口不能为空，如80"
        ></el-input>
      </el-form-item>
      <el-form-item prop="requestMethod" label="请求方法">
        <el-input
          v-model="int.requestMethod"
          placeholder="请选择请求方法"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="responseType" label="响应类型">
        <el-input
          v-model="int.responseType"
          placeholder="请选择响应类型"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="responseType" label="头部处理">
        <el-input
          v-model="int.isEncHeader"
          placeholder="请选择"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="responseType" label="参数加密">
        <el-input
          v-model="int.isEncBody"
          placeholder="请选择"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="dbForm" label="数据库表">
        <el-input v-model.trim="int.dbForm" placeholder="请输入...."></el-input>
      </el-form-item>
      <el-form-item prop="backendLogic" label="后端逻辑">
        <el-input
          v-model.trim="int.backendLogic"
          placeholder="请输入...."
        ></el-input>
      </el-form-item>
      <el-form-item prop="frontendLogic" label="前端逻辑">
        <el-input
          v-model.trim="int.frontendLogic"
          placeholder="请输入...."
        ></el-input>
      </el-form-item>
      <el-form-item label="开发人员">
        <el-input
          v-model.trim="int.developerName"
          placeholder="请输入...."
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as interfaceApi from "../../api/interface";
import * as moduleApi from "../../api/module";
import * as userApi from "../../api/user";
export default {
  name: "InterfaceDetail",
  props: {
    id: Number,
  },
  data() {
    return {
      modules: [],
      users: [],
      requestMethods: [],
      responseTypes: [],
      isEncHeaderType: [],
      int: {
        requestMethod: "GET",
        responseType: "JSON",
        isEncHeader: "",
        isEncBody: "",
      },
      developer: {},
    };
  },
  computed: {
    project() {
      return this.$store.getters.getCurrentProject;
    },
  },
  created() {
    //获取初始化数据
    this.getInitData();
  },
  methods: {
    //获取初始化数据
    async getInitData() {
      //获取所有模块
      await moduleApi.queryByProjectId(this.project.id).then((response) => {
        let result = response.data;
        this.modules = result.data;
      });
      //获取所有用户
      await userApi.queryAll().then((response) => {
        let result = response.data;
        this.users = result.data;
      });
      //如果参数id不为空，则获取需要修改的数据
      if (this.id) {
        await interfaceApi.getById(this.id).then((response) => {
          let result = response.data;
          this.int = result.data;
          this.int.isEncHeader = result.data.isEncHeader ? "否" : "是";
          this.int.isEncBody = result.data.isEncBody ? "否" : "是";
          console.log("================" + this.int.isEncBody);
          this.developer = {
            id: this.int.developerId,
            name: this.int.developerName,
          };
        });
      }
    },
  },
};
</script>

<style>
</style>